import React, { useState, useEffect } from "react";
import { DatePicker } from "antd";
import moment from "moment";
import StashSelect from "@/views/components/StashSelect";
import { GOODS_OUTBOUND_STATUS } from "@/views/utils/constant";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";

import { NumText } from "@/pages/OrderModule/common/components/CommonText";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
export default ({ handleDetailVisible, selectedWarehouse, handleWarehouseChange, warehouseList }) => {
	const defaultColumns = [
		{
			name: "序号",
			code: "index",
			lock: true,
			render: (t, r, i) => i + 1,
			width: 60
		},
		{
			name: "出库单",
			code: "productOutboundNo",
			search: {
				order: 3,
				code: "productOutboundNo",
				content: () => (
					<BatchSuffixInput
						clearable
						allowClear
						autoMultiLine
						maxItem={500}
						modalProps={{
							title: "批量输入"
						}}
						placeholder="多个出库单，以逗号隔开"
						message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
						areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
					/>
				)
			},
			width: 150,
			render: (text, record) => (
				<span className="common-color2" onClick={() => handleDetailVisible(record)}>
					{text}
				</span>
			)
		},
		{
			name: "创建时间",
			code: "createTime",
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				order: 6,
				span: 6,
				group: [
					{
						span: 6,
						code: "timeType",
						content: () => (
							<Select
								origin={origin}
								defaultValue={"0"}
								className="width-full"
								placeholder="选择日期"
								options={[
									{
										value: "0",
										label: "创建时间"
									},
									{
										value: "1",
										label: "完成时间"
									}
								]}
							/>
						)
					},
					{
						span: 18,
						keys: ["createTimeStart", "createTimeEnd"],
						code: "times",
						content: () => <RangePicker format={dateFormat} showTime placeholder={["开始时间", "结束时间"]} />
					}
				]
			},
			width: 200
		},
		{
			name: "供应商",
			code: "supplierName",
			width: 150
		},
		{
			name: "出仓仓库",
			code: "deliveryWarehouseName",
			search: {
				code: "warehouseId",
				order: 8,
				content: (t, r) => (
					<StashSelect
						value={selectedWarehouse}
						warehouseList={warehouseList.current}
						multiple={"multiple"}
						placeholder={"出库仓库"}
						onChange={handleWarehouseChange}
					/>
				)
			},
			width: 100
		},
		{
			name: "出库单状态",
			code: "status",
			render: value => (
				<span>
					{GOODS_OUTBOUND_STATUS.map(item => {
						if (item.value == value) {
							return (
								<NumText
									as="s1"
									type={item.value == 3 ? "success" : item.value == 2 || item.value == 0 || item.value == 1 ? "warning" : "error"}
									num={item.label}
								/>
							);
						}
					})}
				</span>
			),
			width: 150,
			search: {
				order: 1,
				code: "status",
				content: () => <Select allowClear placeholder="出库单状态" options={GOODS_OUTBOUND_STATUS} />
			}
		},
		{
			name: "退货总数",
			code: "returnTotalNum",
			width: 100
		},
		{
			name: "拒退数",
			code: "rejectNum",
			width: 100
		},
		{
			name: "已退数",
			code: "returnedNum",
			width: 100
		},
		{
			name: "实际退货总金额",
			code: "actualRefundNum",
			width: 150,
			render: value => <NumText as="s1" type="error" pre={value ? "¥ " : ""} num={value ? value.toFixed(2) : ""} />
		},
		{
			name: "完结时间",
			code: "completionTime",
			width: 200,
			render: text => (text ? <div>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</div> : ""),
			search: {
				order: 8,
				code: "skuName",
				content: () => <Input allowClear placeholder="商品名称" />
			}
		},
		{
			name: "创建人",
			code: "createUserName",
			search: {
				code: "skuCode",
				order: 9,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 100
		},
		{
			name: "退货员",
			code: "pickerName",
			width: 100,
			search: {
				code: "spuCode",
				order: 10,
				content: () => <Input allowClear placeholder="款式编码" />
			}
		},
		{
			name: "退货备注",
			code: "refundRemark",
			width: 120,
		},
		{
			name: "操作",
			code: "action",
			lock: true,
			align: "center",
			width: 100,
			render: (t, r, i) => {
				return (
					<span className="opera-span-common">
						<span className="opera-span-common">{<span onClick={() => handleDetailVisible(r)}>查看详情</span>}</span>
					</span>
				);
			}
		}
	];
	return { defaultColumns };
};
